<!doctype html>
<html class="no-js" lang="en">

<head>
    <base href="/">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Obrien - Organic Food HTML5 Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/checkout/images/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/checkout/css/vendor/bootstrap.min.css">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="/checkout/css/vendor/font.awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/checkout/css/vendor/ionicons.min.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="/checkout/css/plugins/slick.min.css">
    <!-- Animation -->
    <link rel="stylesheet" href="/checkout/css/plugins/animate.min.css">
    <!-- jQuery Ui -->
    <link rel="stylesheet" href="/checkout/css/plugins/jquery-ui.min.css">
    <!-- Nice Select -->
    <link rel="stylesheet" href="/checkout/css/plugins/nice-select.min.css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="/checkout/css/plugins/magnific-popup.css">

    <!-- Vendor & Plugins CSS (Please remove the comment from below vendor.min.css & plugins.min.css for better website load performance and remove css files from the above) -->

    <!-- <link rel="stylesheet" href="/checkout/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="/checkout/css/plugins/plugins.min.css"> -->

    <!-- Main Style CSS (Please use minify version for better website load performance) -->
    <link rel="stylesheet" href="/checkout/css/style.css">
    <!-- <link rel="stylesheet" href="/checkout/css/style.min.css"> -->

    <style>
        .address-select {
            margin-bottom: 10px;
        }

        .address-item {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
            position: relative;
        }

        .address-item.selected {
            border-color: #4CAF50;
            background-color: #f9fff9;
        }

        input[name="selected-address"] {
            margin-right: 5px;
        }
        .address-container {
            width: 100%;
            max-width: 700px;
        }

        .address-item {
            background: #fff;
            border: 1px solid #e0e0e0;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .address-info {
            margin-bottom: 10px;
        }

        .user-info {
            margin-bottom: 8px;
        }

        .user-info .name {
            font-weight: bold;
            margin-right: 15px;
        }

        .user-info .phone {
            color: #666;
        }

        .address-detail {
            color: #333;
            line-height: 1.5;
        }

        .address-actions {
            margin-top: 10px;
            text-align: right;
        }

        .address-actions button {
            padding: 5px 15px;
            margin-left: 10px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }

        .address-actions button:first-child {
            background: #2196F3;
            color: white;
        }

        .address-actions button:last-child {
            background: #f44336;
            color: white;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
        }

        .form-group input,
        .form-group select {
            width: 200px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>

<body>

    <div class="contact-wrapper">
        <header class="main-header-area">
            <!-- Main Header Area Start -->
            <div class="main-header">
                <div class="container container-default custom-area">
                    <div class="row">
                        <div class="col-lg-12 col-custom">
                            <div class="row align-items-center">
                                <div class="col-lg-2 col-xl-2 col-sm-6 col-6 col-custom">
                                    <div class="header-logo d-flex align-items-center">
                                        <a href="index.html">
                                            <img class="img-full" src="/checkout/images/logo/logo.png" alt="Header Logo">
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-xl-7 position-static d-none d-lg-block col-custom">
                                    <nav class="main-nav d-flex justify-content-center">
                                        <ul class="nav">
                                            <li>
                                                <a href="shopping/index">
                                                    <span class="menu-text"> Home</span>
                                                    <i class="fa fa-angle-down"></i>
                                                </a>
                                                <!--<ul class="dropdown-submenu dropdown-hover">
                                                    <li><a href="index.html">Home Page - 1</a></li>
                                                    <li><a href="index-2.html">Home Page - 2</a></li>
                                                    <li><a href="index-3.html">Home Page - 3</a></li>
                                                    <li><a href="index-4.html">Home Page - 4</a></li>
                                                </ul>-->
                                            </li>
                                            <li>
                                                <a class="active" href="shopping/shop">
                                                    <span class="menu-text">Shop</span>
                                                    <i class="fa fa-angle-down"></i>
                                                </a>

                                            </li>

                                        </ul>
                                    </nav>
                                </div>
                                <div class="col-lg-2 col-xl-3 col-sm-6 col-6 col-custom">
                                    <div class="header-right-area main-nav">
                                        <ul class="nav">
<!--                                            <li class="login-register-wrap d-none d-xl-flex">-->
<!--                                                <span><a href="/shopping/login">Login</a></span>-->
<!--                                                &lt;!&ndash;<span><a href="register.html">Register</a></span>&ndash;&gt;-->
<!--                                            </li>-->
<!--                                            <li class="sidemenu-wrap d-none d-lg-flex">-->
<!--                                                <a href="#">USD <i class="fa fa-caret-down"></i> </a>-->
<!--                                                <ul class="dropdown-sidemenu dropdown-hover-2 dropdown-language">-->
<!--                                                    <li><a href="#">USD - US Dollar</a></li>-->
<!--                                                    <li><a href="#">EUR - Euro</a></li>-->
<!--                                                    <li><a href="#">GBP - British Pound</a></li>-->
<!--                                                    <li><a href="#">INR - Indian Rupee</a></li>-->
<!--                                                    <li><a href="#">BDT - Bangladesh Taka</a></li>-->
<!--                                                    <li><a href="#">JPY - Japan Yen</a></li>-->
<!--                                                    <li><a href="#">CAD - Canada Dollar</a></li>-->
<!--                                                    <li><a href="#">AUD - Australian Dollar</a></li>-->
<!--                                                </ul>-->
<!--                                            </li>-->
<!--                                            <li class="minicart-wrap">-->
<!--                                                <a href="#" class="minicart-btn toolbar-btn">-->
<!--                                                    <i class="ion-bag"></i>-->
<!--                                                    <span class="cart-item_count">3</span>-->
<!--                                                </a>-->
<!--                                                <div class="cart-item-wrapper dropdown-sidemenu dropdown-hover-2">-->
<!--                                                    <div class="single-cart-item">-->
<!--                                                        <div class="cart-img">-->
<!--                                                            <a href="cart.html"><img src="/checkout/images/cart/1.jpg" alt=""></a>-->
<!--                                                        </div>-->
<!--                                                        <div class="cart-text">-->
<!--                                                            <h5 class="title"><a href="cart.html">11. Product with video - navy</a></h5>-->
<!--                                                            <div class="cart-text-btn">-->
<!--                                                                <div class="cart-qty">-->
<!--                                                                    <span>1×</span>-->
<!--                                                                    <span class="cart-price">$98.00</span>-->
<!--                                                                </div>-->
<!--                                                                <button type="button"><i class="ion-trash-b"></i></button>-->
<!--                                                            </div>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                    <div class="single-cart-item">-->
<!--                                                        <div class="cart-img">-->
<!--                                                            <a href="cart.html"><img src="/checkout/images/cart/2.jpg" alt=""></a>-->
<!--                                                        </div>-->
<!--                                                        <div class="cart-text">-->
<!--                                                            <h5 class="title"><a href="cart.html" title="10. This is the large title for testing large title and there is an image for testing - white">10. This is the large title for testing...</a></h5>-->
<!--                                                            <div class="cart-text-btn">-->
<!--                                                                <div class="cart-qty">-->
<!--                                                                    <span>1×</span>-->
<!--                                                                    <span class="cart-price">$98.00</span>-->
<!--                                                                </div>-->
<!--                                                                <button type="button"><i class="ion-trash-b"></i></button>-->
<!--                                                            </div>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                    <div class="single-cart-item">-->
<!--                                                        <div class="cart-img">-->
<!--                                                            <a href="cart.html"><img src="/checkout/images/cart/3.jpg" alt=""></a>-->
<!--                                                        </div>-->
<!--                                                        <div class="cart-text">-->
<!--                                                            <h5 class="title"><a href="cart.html">1. New and sale badge product - s / red</a></h5>-->
<!--                                                            <div class="cart-text-btn">-->
<!--                                                                <div class="cart-qty">-->
<!--                                                                    <span>1×</span>-->
<!--                                                                    <span class="cart-price">$98.00</span>-->
<!--                                                                </div>-->
<!--                                                                <button type="button"><i class="ion-trash-b"></i></button>-->
<!--                                                            </div>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                    <div class="cart-price-total d-flex justify-content-between">-->
<!--                                                        <h5>Total :</h5>-->
<!--                                                        <h5>$166.00</h5>-->
<!--                                                    </div>-->
<!--                                                    <div class="cart-links d-flex justify-content-center">-->
<!--                                                        <a class="obrien-button white-btn" href="cart.html">View cart</a>-->
<!--                                                        <a class="obrien-button white-btn" href="checkout.html">Checkout</a>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </li>-->
                                            <li class="mobile-menu-btn d-lg-none">
                                                <a class="off-canvas-btn" href="#">
                                                    <i class="fa fa-bars"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Main Header Area End -->
            <!-- Sticky Header Start Here-->
            <div class="main-header header-sticky">
                <div class="container container-default custom-area">
                    <div class="row">
                        <div class="col-lg-12 col-custom">
                            <div class="row align-items-center">
                                <div class="col-lg-2 col-xl-2 col-sm-6 col-6 col-custom">
                                    <div class="header-logo">
                                        <a href="index.html">
                                            <img class="img-full" src="/checkout/images/logo/logo.png" alt="Header Logo">
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-xl-7 position-static d-none d-lg-block col-custom">
                                    <nav class="main-nav d-flex justify-content-center">
                                        <ul class="nav">
                                            <li>
                                                <a href="shopping/index">
                                                    <span class="menu-text"> Home</span>
                                                    <i class="fa fa-angle-down"></i>
                                                </a>

                                            </li>
                                            <li>
                                                <a class="active" href="shopping/shop">
                                                    <span class="menu-text">Shop</span>
                                                    <i class="fa fa-angle-down"></i>
                                                </a>

                                            </li>



                                        </ul>
                                    </nav>
                                </div>
                                <div class="col-lg-2 col-xl-3 col-sm-6 col-6 col-custom">
                                    <div class="header-right-area main-nav">
                                        <ul class="nav">
<!--                                            <li class="login-register-wrap d-none d-xl-flex">-->
<!--                                                <span><a href="shopping/login">Login</a></span>-->
<!--                                            </li>-->
<!--                                            <li class="sidemenu-wrap d-none d-lg-flex">-->
<!--                                                <a href="#">USD <i class="fa fa-caret-down"></i> </a>-->
<!--                                                <ul class="dropdown-sidemenu dropdown-hover-2 dropdown-language">-->
<!--                                                    <li><a href="#">USD - US Dollar</a></li>-->
<!--                                                    <li><a href="#">EUR - Euro</a></li>-->
<!--                                                    <li><a href="#">GBP - British Pound</a></li>-->
<!--                                                    <li><a href="#">INR - Indian Rupee</a></li>-->
<!--                                                    <li><a href="#">BDT - Bangladesh Taka</a></li>-->
<!--                                                    <li><a href="#">JPY - Japan Yen</a></li>-->
<!--                                                    <li><a href="#">CAD - Canada Dollar</a></li>-->
<!--                                                    <li><a href="#">AUD - Australian Dollar</a></li>-->
<!--                                                </ul>-->
<!--                                            </li>-->
                                            <li class="minicart-wrap">
                                                <a href="#" class="minicart-btn toolbar-btn">
                                                    <i class="ion-bag"></i>
                                                    <span class="cart-item_count">3</span>
                                                </a>
                                                <div class="cart-item-wrapper dropdown-sidemenu dropdown-hover-2">
                                                    <div class="single-cart-item">
                                                        <div class="cart-img">
                                                            <a href="cart.html"><img src="/checkout/images/cart/1.jpg" alt=""></a>
                                                        </div>
                                                        <div class="cart-text">
                                                            <h5 class="title"><a href="cart.html">11. Product with video - navy</a></h5>
                                                            <div class="cart-text-btn">
                                                                <div class="cart-qty">
                                                                    <span>1×</span>
                                                                    <span class="cart-price">$98.00</span>
                                                                </div>
                                                                <button type="button"><i class="ion-trash-b"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="single-cart-item">
                                                        <div class="cart-img">
                                                            <a href="cart.html"><img src="/checkout/images/cart/2.jpg" alt=""></a>
                                                        </div>
                                                        <div class="cart-text">
                                                            <h5 class="title"><a href="cart.html" title="10. This is the large title for testing large title and there is an image for testing - white">10. This is the large title for testing...</a></h5>
                                                            <div class="cart-text-btn">
                                                                <div class="cart-qty">
                                                                    <span>1×</span>
                                                                    <span class="cart-price">$98.00</span>
                                                                </div>
                                                                <button type="button"><i class="ion-trash-b"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="single-cart-item">
                                                        <div class="cart-img">
                                                            <a href="cart.html"><img src="/checkout/images/cart/3.jpg" alt=""></a>
                                                        </div>
                                                        <div class="cart-text">
                                                            <h5 class="title"><a href="cart.html">1. New and sale badge product - s / red</a></h5>
                                                            <div class="cart-text-btn">
                                                                <div class="cart-qty">
                                                                    <span>1×</span>
                                                                    <span class="cart-price">$98.00</span>
                                                                </div>
                                                                <button type="button"><i class="ion-trash-b"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cart-price-total d-flex justify-content-between">
                                                        <h5>Total :</h5>
                                                        <h5>$166.00</h5>
                                                    </div>
                                                    <div class="cart-links d-flex justify-content-center">
                                                        <a class="obrien-button white-btn" href="cart.html">View cart</a>
                                                        <a class="obrien-button white-btn" href="checkout.html">Checkout</a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mobile-menu-btn d-lg-none">
                                                <a class="off-canvas-btn" href="#mobileMenu">
                                                    <i class="fa fa-bars"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Sticky Header End Here -->
            <!-- off-canvas menu start -->
            <aside class="off-canvas-wrapper" id="mobileMenu">
                <div class="off-canvas-overlay"></div>
                <div class="off-canvas-inner-content">
                    <div class="btn-close-off-canvas">
                        <i class="fa fa-times"></i>
                    </div>
                    <div class="off-canvas-inner">
                        <div class="search-box-offcanvas">
                            <form>
                                <input type="text" placeholder="Search product...">
                                <button class="search-btn"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        <!-- mobile menu start -->
                        <div class="mobile-navigation">
                            <!-- mobile menu navigation start -->
                            <nav>
                                <ul class="mobile-menu">
                                    <li class="menu-item-has-children"><a href="shopping/index">Home</a>
<!--                                        <ul class="dropdown">-->
<!--                                            <li><a href="index.html">Home Page 1</a></li>-->
<!--                                            <li><a href="index-2.html">Home Page 2</a></li>-->
<!--                                            <li><a href="index-3.html">Home Page 3</a></li>-->
<!--                                            <li><a href="index-4.html">Home Page 4</a></li>-->
<!--                                        </ul>-->
                                    </li>
                                    <li class="menu-item-has-children"><a href="shopping/shop">Shop</a>
                                    </li>
                                </ul>
                            </nav>
                            <!-- mobile menu navigation end -->
                        </div>
                        <!-- mobile menu end -->
                        <div class="header-top-settings offcanvas-curreny-lang-support">
                            <!-- mobile menu navigation start -->
<!--                            <nav>-->
<!--                                <ul class="mobile-menu">-->
<!--                                    <li class="menu-item-has-children"><a href="#">My Account</a>-->
<!--                                        <ul class="dropdown">-->
<!--                                            <li><a href="login.html">Login</a></li>-->
<!--                                            <li><a href="Register.html">Register</a></li>-->
<!--                                        </ul>-->
<!--                                    </li>-->
<!--                                    <li class="menu-item-has-children"><a href="#">Currency:USD</a>-->
<!--                                        <ul class="dropdown">-->
<!--                                            <li><a href="#">USD - US Dollar</a></li>-->
<!--                                            <li><a href="#">EUR - Euro</a></li>-->
<!--                                            <li><a href="#">GBP - British Pound</a></li>-->
<!--                                            <li><a href="#">INR - Indian Rupee</a></li>-->
<!--                                            <li><a href="#">BDT - Bangladesh Taka</a></li>-->
<!--                                            <li><a href="#">JPY - Japan Yen</a></li>-->
<!--                                            <li><a href="#">CAD - Canada Dollar</a></li>-->
<!--                                            <li><a href="#">AUD - Australian Dollar</a></li>-->
<!--                                        </ul>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </nav>-->
                            <!-- mobile menu navigation end -->
                        </div>
                        <!-- offcanvas widget area start -->
<!--                        <div class="offcanvas-widget-area">-->
<!--                            <div class="top-info-wrap text-left text-black">-->
<!--                                <ul>-->
<!--                                    <li>-->
<!--                                        <i class="fa fa-phone"></i>-->
<!--                                        <a href="#">(1245) 2456 012</a>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                        <i class="fa fa-envelope"></i>-->
<!--                                        <a href="#">@example.com</a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                            <div class="off-canvas-widget-social">-->
<!--                                <a title="Facebook-f" href="#"><i class="fa fa-facebook-f"></i></a>-->
<!--                                <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>-->
<!--                                <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>-->
<!--                                <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>-->
<!--                                <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>-->
<!--                            </div>-->
<!--                        </div>-->
                        <!-- offcanvas widget area end -->
                    </div>
                </div>
            </aside>
            <!-- off-canvas menu end -->
        </header>
        <!-- Breadcrumb Area Start Here -->
        <div class="breadcrumbs-area position-relative">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <div class="breadcrumb-content position-relative section-content">
                            <h3 class="title-3">Checkout</h3>
                            <ul>
                                <li><a href="shopping/index">Home</a></li>
                                <li>Checkout</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Breadcrumb Area End Here -->
        <!-- Checkout Area Start Here -->
        <div class="checkout-area">
            <div class="container container-default-2 custom-container">
                <div class="row">
                    <div class="col-12">
                        <div class="coupon-accordion">
<!--                            <h3>Returning customer? <span id="showlogin">Click here to login</span></h3>-->
<!--                            <div id="checkout-login" class="coupon-content">-->
<!--                                <div class="coupon-info">-->
<!--                                    <p class="coupon-text">Quisque gravida turpis sit amet nulla posuere lacinia. Cras sed est-->
<!--                                        sit amet ipsum luctus.</p>-->
<!--                                    <form action="#">-->
<!--                                        <p class="form-row-first">-->
<!--                                            <label>Username or email <span class="required">*</span></label>-->
<!--                                            <input type="text">-->
<!--                                        </p>-->
<!--                                        <p class="form-row-last">-->
<!--                                            <label>Password <span class="required">*</span></label>-->
<!--                                            <input type="password">-->
<!--                                        </p>-->
<!--                                        <p class="form-row">-->
<!--                                            <input type="checkbox" id="remember_me">-->
<!--                                            <label for="remember_me">Remember me</label>-->
<!--                                        </p>-->
<!--                                        <p class="lost-password"><a href="#">Lost your password?</a></p>-->
<!--                                    </form>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <h3>Have a coupon? <span id="showcoupon">Click here to enter your code</span></h3>-->
<!--                            <div id="checkout_coupon" class="coupon-checkout-content">-->
<!--                                <div class="coupon-info">-->
<!--                                    <form action="#">-->
<!--                                        <p class="checkout-coupon">-->
<!--                                            <input placeholder="Coupon code" type="text">-->
<!--                                            <input class="coupon-inner_btn" value="Apply Coupon" type="submit">-->
<!--                                        </p>-->
<!--                                    </form>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!--我的地址-->
                    <div class="content" id="my-address" style="margin-left: 220px; padding: 20px; display: flex; justify-content: center;">
                        <!-- 我的地址内容区域 -->
                        <div  class="tab-pane" style="width: 100%; max-width: 800px;">
                            <h3 style="text-align: center; margin-bottom: 20px; color: #333;">我的收货地址</h3>

                            <!-- 地址列表容器 -->
                            <div id="address-list" class="address-container" style="margin: 0 auto;">
                                <!-- 地址列表将在这里动态渲染 -->
                            </div>

                            <!-- 添加新地址按钮 -->
                            <div class="add-address" style="text-align: center; margin-top: 20px;">
                                <button class="add-address-btn" onclick="showAddressForm()"
                                        style="background: #4CAF50; color: white; border: none; padding: 10px 20px;
                           border-radius: 4px; cursor: pointer;">
                                    添加新地址
                                </button>
                            </div>
                            <!-- 添加/编辑地址表单 -->
                            <div id="address-form" class="address-form" style="display: none; max-width: 600px;
     margin: 20px auto; background: #fff; padding: 20px; border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                                <h3 class="form-title">添加新地址</h3>
                                <form id="userAddressForm">
                                    <input type="hidden" id="addressId" name="id">
                                    <div class="form-group">
                                        <label>收货人姓名：</label>
                                        <input type="text" id="receiver" name="name" required style="width: 200px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    </div>
                                    <div class="form-group">
                                        <label>手机号码：</label>
                                        <input type="tel" id="useraddress-phone" name="phone" required style="width: 200px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    </div>
                                    <div class="form-group">
                                        <label>所在地区：</label>
                                        <div style="display: inline-block;">
                                            <select id="province" name="province" required style="width: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-right: 5px;">
                                                <option value="">请选择省份</option>
                                            </select>

                                            <select id="city" name="city" required style="width: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-right: 5px;">
                                                <option value="">请选择城市</option>
                                            </select>

                                            <select id="state" name="state" required style="width: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                                <option value="">请选择区县</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>详细地址：</label>
                                        <input type="text" id="address" name="address" required style="width: 400px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    </div>
                                    <!-- 添加默认地址复选框 -->
                                    <div class="form-group">
                                        <label>
                                            <input type="checkbox" id="set-default" name="isdefault"> 设为默认地址
                                        </label>
                                    </div>
                                    <div class="form-actions" style="text-align: center; margin-top: 20px;">
                                        <button type="button" onclick="saveAddress()" style="background: #2196F3; color: white; border: none; padding: 8px 20px; border-radius: 4px; margin-right: 10px;">保存</button>
                                        <button type="button" onclick="cancelEdit()" style="background: #f44336; color: white; border: none; padding: 8px 20px; border-radius: 4px;">取消</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <div class="your-order">
                            <h3>Your order</h3>
                            <div class="your-order-table table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="cart-product-name">Product</th>
                                            <th class="cart-product-total">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="cart_item">
                                            <td class="cart-product-name"> Vestibulum suscipit<strong class="product-quantity">
                                    × 1</strong></td>
                                            <td class="cart-product-total text-center"><span class="amount">£165.00</span></td>
                                        </tr>
                                        <tr class="cart_item">
                                            <td class="cart-product-name"> Vestibulum suscipit<strong class="product-quantity">
                                    × 1</strong></td>
                                            <td class="cart-product-total text-center"><span class="amount">£165.00</span></td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr class="cart-subtotal">
                                            <th>Cart Subtotal</th>
                                            <td class="text-center"><span class="amount">£215.00</span></td>
                                        </tr>
                                        <tr class="order-total">
                                            <th>Order Total</th>
                                            <td class="text-center"><strong><span class="amount">£215.00</span></strong></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="payment-method">
                                <div class="payment-accordion">
                                    <div id="accordion">
                                        <div class="card">
                                            <div class="card-header" id="#payment-1">
                                                <h5 class="panel-title mb-2">
<!--                                                    <a href="#" class="" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">-->
<!--                                                        Direct Bank Transfer.-->
<!--                                                    </a>-->
                                                </h5>
                                            </div>
                                            <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
                                                <div class="card-body mb-2 mt-2">
                                                    <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card">
<!--                                            <div class="card-header" id="#payment-2">-->
<!--                                                <h5 class="panel-title mb-2">-->
<!--                                                    <a href="#" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">-->
<!--                                                        Cheque Payment-->
<!--                                                    </a>-->
<!--                                                </h5>-->
<!--                                            </div>-->
                                            <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
                                                <div class="card-body mb-2 mt-2">
                                                    <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="#payment-3">
<!--                                                <h5 class="panel-title mb-2">-->
<!--                                                    <a href="#" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">-->
<!--                                                        PayPal-->
<!--                                                    </a>-->
<!--                                                </h5>-->
                                            </div>
                                            <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
                                                <div class="card-body mb-2 mt-2">
                                                    <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="order-button-payment">
                                        <button type="button" id="jiesuanBtn" style="color: #4CAF50; border: 2px solid #4CAF50; border-radius: 5px; padding: 10px 20px; font-weight: bold; transition: all 0.3s ease;">PLACE ORDER</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Checkout Area End Here -->
        <!-- Support Area Start Here -->
<!--        <div class="support-area">-->
<!--            <div class="container container-default custom-area">-->
<!--                <div class="row">-->
<!--                    <div class="col-lg-12 col-custom">-->
<!--                        <div class="support-wrapper d-flex">-->
<!--                            <div class="support-content">-->
<!--                                <h1 class="title">Need Help ?</h1>-->
<!--                                <p class="desc-content">Call our support 24/7 at 01234-567-890</p>-->
<!--                            </div>-->
<!--                            <div class="support-button d-flex align-items-center">-->
<!--                                <a class="obrien-button primary-btn" href="contact-us.html">Contact now</a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- Support Area End Here -->
        <!-- Footer Area Start Here -->
<!--        <footer class="footer-area">-->
<!--            <div class="footer-widget-area">-->
<!--                <div class="container container-default custom-area">-->
<!--                    <div class="row">-->
<!--                        <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-custom">-->
<!--                            <div class="single-footer-widget m-0">-->
<!--                                <div class="footer-logo">-->
<!--                                    <a href="index.html">-->
<!--                                        <img src="/checkout/images/logo/footer.png" alt="Logo Image">-->
<!--                                    </a>-->
<!--                                </div>-->
<!--                                <p class="desc-content">Obrien is the best parts shop of your daily nutritions. What kind of nutrition do you need you can get here soluta nobis</p>-->
<!--                                <div class="social-links">-->
<!--                                    <ul class="d-flex">-->
<!--                                        <li>-->
<!--                                            <a class="border rounded-circle" href="#" title="Facebook">-->
<!--                                                <i class="fa fa-facebook-f"></i>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a class="border rounded-circle" href="#" title="Twitter">-->
<!--                                                <i class="fa fa-twitter"></i>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a class="border rounded-circle" href="#" title="Linkedin">-->
<!--                                                <i class="fa fa-linkedin"></i>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a class="border rounded-circle" href="#" title="Youtube">-->
<!--                                                <i class="fa fa-youtube"></i>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <a class="border rounded-circle" href="#" title="Vimeo">-->
<!--                                                <i class="fa fa-vimeo"></i>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-custom">-->
<!--                            <div class="single-footer-widget">-->
<!--                                <h2 class="widget-title">Information</h2>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-custom">-->
<!--                            <div class="single-footer-widget">-->
<!--                                <h2 class="widget-title">Quicklink</h2>-->
<!--                                <ul class="widget-list">-->
<!--                                    &lt;!&ndash;<li><a href="about-us.html">About</a></li>-->
<!--                                    <li><a href="blog.html">Blog</a></li>&ndash;&gt;-->
<!--                                    <li><a href="shop">Shop</a></li>-->
<!--                                    <li><a href="shopping/cart">Cart</a></li>-->
<!--                                    &lt;!&ndash;<li><a href="contact-us.html">Contact</a></li>&ndash;&gt;-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash;<div class="col-12 col-sm-6 col-md-6 col-lg-2 col-custom">-->
<!--                            <div class="single-footer-widget">-->
<!--                                <h2 class="widget-title">Support</h2>-->
<!--                                <ul class="widget-list">-->
<!--                                    <li><a href="contact-us.html">Online Support</a></li>-->
<!--                                    <li><a href="contact-us.html">Shipping Policy</a></li>-->
<!--                                    <li><a href="contact-us.html">Return Policy</a></li>-->
<!--                                    <li><a href="contact-us.html">Privacy Policy</a></li>-->
<!--                                    <li><a href="contact-us.html">Terms of Service</a></li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>&ndash;&gt;-->
<!--                        <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-custom">-->
<!--                            <div class="single-footer-widget">-->
<!--                                <h2 class="widget-title">See Information</h2>-->
<!--                                <div class="widget-body">-->
<!--                                    <address>123, H2, Road #21, Main City, Your address goes here.<br>Phone: 01254 698 785, 36598 254 987<br>Email: https://example.com</address>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="footer-copyright-area">-->
<!--                <div class="container custom-area">-->
<!--                    <div class="row">-->
<!--                        <div class="col-12 text-center col-custom">-->
<!--                            <div class="copyright-content">-->
<!--                                <p>Copyright © 2025  | <i class="fa fa-heart text-danger"></i> <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a>.</p>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </footer>-->
        <!-- Footer Area End Here -->
    </div>

    <!-- JS
============================================ -->

    <!-- jQuery JS -->
    <script src="/checkout/js/vendor/jquery-3.6.0.min.js"></script>
    <!-- jQuery Migrate JS -->
    <script src="/checkout/js/vendor/jquery-migrate-3.3.2.min.js"></script>
    <!-- Modernizer JS -->
    <script src="/checkout/js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="/checkout/js/vendor/bootstrap.bundle.min.js"></script>
    <!-- Slick Slider JS -->
    <script src="/checkout/js/plugins/slick.min.js"></script>
    <!-- Countdown JS -->
    <script src="/checkout/js/plugins/jquery.countdown.min.js"></script>
    <!-- Ajax JS -->
    <script src="/checkout/js/plugins/jquery.ajaxchimp.min.js"></script>
    <!-- Jquery Nice Select JS -->
    <script src="/checkout/js/plugins/jquery.nice-select.min.js"></script>
    <!-- Jquery Ui JS -->
    <script src="/checkout/js/plugins/jquery-ui.min.js"></script>
    <!-- jquery magnific popup js -->
    <script src="/checkout/js/plugins/jquery.magnific-popup.min.js"></script>

    <!-- Main JS -->
    <script src="/checkout/js/main.js"></script>

    <script src="/layui/layui.all.js"></script>

    <script>
        const layer=layui.layer;
//显示地址


            // 加载内容的函数
            function loadContent(target) {
            // 隐藏所有内容区域
            $(".content-section").hide();
            $("#my-address").hide();

            if (target === "my-address") {
            $("#my-address").css("display", "flex");
            // 加载地址列表
            loadUserAddresses();
            // 初始化省份下拉框
            initProvinceSelect();
        } else {
            // 显示对应的内容区域
            $("#" + target).show();
        }
        }
            // 加载其他内容的函数


            /*});*/

        // 修改loadUserAddresses函数中的地址渲染部分
        function loadUserAddresses() {
            $.ajax({
                url: '/useraddress/list',
                type: 'GET',
                success: function(response) {
                    const container = $('#address-list');
                    container.empty();

                    if (response.code === 0 && response.data && response.data.length > 0) {
                        const addresses = response.data;
                        let hasDefaultAddress = false;
                        let defaultAddressId = null;

                        // 检查是否有默认地址
                        addresses.forEach(useraddress => {
                            if (useraddress.isdefault === 1) {
                                hasDefaultAddress = true;
                                defaultAddressId = useraddress.useraddressid;
                            }
                        });

                        // 渲染地址列表
                        addresses.forEach(useraddress => {
                            container.append(`
                <div class="address-item" data-id="${useraddress.useraddressid}">
                    <div class="address-info">
                        <!-- 添加单选按钮 -->
                        <div class="address-select">
                            <input type="radio" name="selected-address" id="select-${useraddress.useraddressid}"
                                value="${useraddress.useraddressid}"
                                ${useraddress.isdefault === 1 ? 'checked' : ''}>
                            <label for="select-${useraddress.useraddressid}">选择此地址</label>
                        </div>
                        <div class="user-info">
                            <span class="name">${useraddress.name}</span>
                            <span class="phone">${useraddress.phone}</span>
                            ${useraddress.isdefault === 1 ? '<span class="default-tag" style="color: #ff4400; margin-left: 10px; font-size: 12px;">[默认地址]</span>' : ''}
                        </div>
                        <div class="address-detail">
                            ${useraddress.province} ${useraddress.city} ${useraddress.state} ${useraddress.address}
                        </div>
                        <div class="default-address">
                            <input type="checkbox" class="default-checkbox" id="default-${useraddress.useraddressid}"
                                ${useraddress.isdefault === 1 ? 'checked' : ''}>
                            <label for="default-${useraddress.useraddressid}">设为默认地址</label>
                        </div>
                    </div>
                    <div class="address-actions">
                        <button onclick="editAddress(${useraddress.useraddressid})">编辑</button>
                        <button onclick="deleteAddress(${useraddress.useraddressid})">删除</button>
                    </div>
                </div>
            `);
                        });

                        // 如果没有默认地址，选中第一个地址
                        if (!hasDefaultAddress && addresses.length > 0) {
                            $(`#select-${addresses[0].useraddressid}`).prop('checked', true);
                        }

                        // 在渲染完成后绑定事件
                        addresses.forEach(useraddress => {
                            $(`#default-${useraddress.useraddressid}`).on('change', function() {
                                setDefaultAddress(useraddress.useraddressid, this);
                            });
                        });
                    } else {
                        container.html('<div class="no-address">暂无收货地址</div>');
                    }
                }
            });
        }


        // 设置默认地址
        function setDefaultAddress(addressId, checkbox) {
            console.log('设置默认地址被调用:', addressId, checkbox.checked);

            if (!addressId) {
                layer.msg('地址ID不能为空');
                checkbox.checked = false;
                return;
            }

            // 获取当前复选框的状态
            const isDefault = checkbox.checked ? 1 : 0;

            // 如果是设置为默认，取消其他地址的默认状态
            if (isDefault == 1) {
                $('.default-checkbox').not(checkbox).prop('checked', false);
            }

            $.ajax({
                url: '/useraddress/setdefault',
                type: 'POST',
                data: {
                    id: addressId,  // 修改为useraddressid
                    isdefault: isDefault
                },
                success: function(response) {
                    console.log('设置默认地址响应:', response);
                    if (response.code === 0) {
                        layer.msg(isDefault === 1 ? '设置默认地址成功' : '取消默认地址成功');
                        // 强制刷新地址列表，确保UI状态与后端一致
                        setTimeout(function() {
                            loadUserAddresses();
                        }, 300);
                    } else {
                        layer.msg(response.msg || '操作失败');
                        // 恢复复选框原来的状态
                        checkbox.checked = !checkbox.checked;
                    }
                },
                error: function(xhr, status, error) {
                    console.error('操作失败:', xhr.responseText);
                    layer.msg('操作失败: ' + error);
                    // 恢复复选框原来的状态
                    checkbox.checked = !checkbox.checked;
                }
            });
        }
            // 删除地址
            function deleteAddress(id) {
            layer.confirm('确定要删除这个地址吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.ajax({
                    url: `/useraddress/delete?id=${id}`,
                    type: 'GET',
                    success: function (response) {
                        if (response.code === 0) {
                            layer.msg('删除成功');
                            loadUserAddresses();
                        } else {
                            layer.msg(response.msg || '删除失败');
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.msg('删除失败: ' + error);
                    }
                });
            });
        }

            // 填充地址表单
            function fillAddressForm(address) {
            $('#addressId').val(address.useraddressid);
            $('#receiver').val(address.name);
            $('#useraddress-phone').val(address.phone);
            $('#address').val(address.address);
            $('#set-default').prop('checked', address.isdefault === 1);

            // 加载省市区数据并设置选中值
            LoadProvinces(address.province, address.city, address.state);
        }
        function showAddressForm() {
            resetForm();
            $('#address-form .form-title').text('添加新地址');
            $('#address-form').show();
            $('.add-address-btn').hide();
        }
            // 重置表单
            function resetForm() {
            $('#addressId').val('');
            $('#receiver').val('');
            $('#useraddress-phone').val('');
            $('#province').val('');
            $('#city').val('');
            $('#state').val('');
            $('#address').val('');
            $('#set-default').prop('checked', false);
        }

        // 编辑地址
        function editAddress(id) {
            /*const useraddressId=$(this).closest(".address-item").data("addressid");*/
            $.ajax({
                url: `/useraddress/getuseraddressbyid?id=${id}`, // 修改为正确的获取地址信息接口
                type: 'GET',
                success: function (response) {
                    if (response.code == 0) {
                        const useraddress = response.data;
                        fillAddressForm(useraddress);
                        $('#address-form .form-title').text('编辑地址');
                        $('#address-form').show();
                        $('.add-address-btn').hide();

                        /*LoadProvinces(useraddress.province, useraddress.city, useraddress.state);*/
                    } else {
                        layer.msg(response.msg || '获取地址信息失败');
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg('获取地址信息失败: ' + error);
                }
            });
        }

            // 取消编辑
            function cancelEdit() {
            $('#address-form').hide();
            $('.add-address-btn').show();
        }

            // 初始化省市区三级联动功能
            const amapKey = "d5e466c74f37e2b1f89163a68a161ea7";

            function LoadProvinces(selectedProvince = "", selectedCity = "", selectedArea = "") {
            const url = `https://restapi.amap.com/v3/config/district?key=${amapKey}&keywords=中国&subdistrict=1&extensions=base`;

            $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
            if (response.status === "1") {
            const provinces = response.districts[0].districts;
            $("#province").empty().append('<option value="">请选择省份</option>');
            provinces.forEach(province => {
            $("#province").append(`<option value="${province.name}">${province.name}</option>`);
        });

            // 设置选中的省份并触发加载城市
            if (selectedProvince) {
            $("#province").val(selectedProvince);
            loadCities(selectedProvince, selectedCity, selectedArea);
        }
        }
        }
        });
        }

            // 加载城市数据
            function loadCities(provinceName, selectedCity = "", selectedArea = "") {
            if (!provinceName) return;

            const url = `https://restapi.amap.com/v3/config/district?key=${amapKey}&keywords=${encodeURIComponent(provinceName)}&subdistrict=1&extensions=base`;

            $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
            if (response.status === "1" && response.districts && response.districts[0]) {
            const cities = response.districts[0].districts;
            $("#city").empty().append('<option value="">请选择城市</option>');
            cities.forEach(city => {
            $("#city").append(`<option value="${city.name}">${city.name}</option>`);
        });

            // 设置选中的城市并触发加载区域
            if (selectedCity) {
            $("#city").val(selectedCity);
            loadAreas(selectedCity, selectedArea);
        }
        }
        }
        });
        }

            // 加载区域数据
            function loadAreas(cityName, selectedArea = "") {
            if (!cityName) return;

            const url = `https://restapi.amap.com/v3/config/district?key=${amapKey}&keywords=${encodeURIComponent(cityName)}&subdistrict=1&extensions=base`;

            $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
            if (response.status === "1" && response.districts && response.districts[0]) {
            const areas = response.districts[0].districts;
            $("#state").empty().append('<option value="">请选择区域</option>');
            areas.forEach(area => {
            $("#state").append(`<option value="${area.name}">${area.name}</option>`);
        });

            // 设置选中的区域
            if (selectedArea) {
            $("#state").val(selectedArea);
        }
        }
        }
        });
        }

            // 初始化省份下拉框
            function initProvinceSelect() {
            LoadProvinces();

            // 监听省份变化
            $('#province').off('change').on('change', function () {
            const province = $(this).val();
            $("#city").empty().append('<option value="">请选择城市</option>');
            $("#state").empty().append('<option value="">请选择区域</option>');
            if (province) {
            loadCities(province);
        }
        });

            // 监听城市变化
            $('#city').off('change').on('change', function () {
            const city = $(this).val();
            $("#state").empty().append('<option value="">请选择区域</option>');
            if (city) {
            loadAreas(city);
        }
        });
        }

        function saveAddress() {
            // 检查用户ID是否存在
            /*if (!window.currentUserId) {
                layer.msg('用户未登录，请先登录');
                return;
            }*/

            // 获取表单数据
            const formData = {
                useraddressid: $('#addressId').val() || null,  // 使用正确的主键名
                /*userid: window.currentUserId,*/
                name: $('#receiver').val().trim(),
                phone: $('#useraddress-phone').val().trim(),
                province: $('#province').val(),
                city: $('#city').val(),
                state: $('#state').val(),
                address: $('#address').val().trim(),
                isdefault: $('#set-default').is(':checked') ? 1 : 0
            };

            // 如果是新增地址，删除useraddressid字段
            if (!formData.useraddressid) {
                delete formData.useraddressid;
            }

            // 表单验证
            if (!validateAddressForm(formData)) {
                return;
            }

            // 确定是新增还是编辑
            const url = formData.useraddressid ? '/useraddress/edit' : '/useraddress/add';

            console.log('提交的地址数据:', formData);

            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded',
                data: formData,
                success: function(response) {
                    console.log('保存地址响应:', response);

                    layer.msg('保存成功');
                    cancelEdit();
                    loadUserAddresses();



                },
                error: function(xhr, status, error) {
                    console.error('保存地址失败:', xhr.responseText);
                    layer.msg('保存失败: ' + error);
                }
            });
        }

            // 修改表单验证函数
            function validateAddressForm(data) {
            if (!data.name) {
            layer.msg('请输入收货人姓名');
            return false;
        }
            if (!data.phone) {
            layer.msg('请输入手机号码');
            return false;
        }
            if (!/^1[3-9]\d{9}$/.test(data.phone)) {
            layer.msg('请输入正确的手机号码');
            return false;
        }
            if (!data.province || !data.city || !data.state) {
            layer.msg('请选择完整的收货地址');
            return false;
        }
            if (!data.address) {
            layer.msg('请输入详细地址');
            return false;
        }
            return true;
        }

            // 页面加载完成后执行

            // 获取当前用户ID
            /*window.currentUserId = '${session.SHOPPING_LOGIN_USER.id}';*/

            // 加载地址列表
            loadUserAddresses();

            // 初始化省份下拉框
            initProvinceSelect();





//显示购买商品数据
// 页面加载完成后执行
$(document).ready(function() {
    // 获取URL参数中的商品ID和数量
    const urlParams = new URLSearchParams(window.location.search);
    const productIds = urlParams.get('productids');
    const counts = urlParams.get('counts');

    // 如果有商品参数，则加载商品信息
    /*if(productIds.length!=counts.length||productIds.length==0||counts.length==0){
        layer.msg("系统异常,请重新选购",{icon:3})
        setTimeout(function(){
            location.href="shopping/index";
        },3000)
    }*/

    /*else {*/
        loadProductInfo(productIds, counts);
   /* }*/ /*else {
        // 没有商品参数，显示提示信息
        $('tbody').html('<tr><td colspan="2" style="text-align:center;">没有选择商品</td></tr>');
        $('.cart-subtotal .amount').text('¥0.00');
        $('.order-total .amount').text('¥0.00');
    }*/
});

// 加载商品信息
function loadProductInfo(productIds, counts) {
    // 将逗号分隔的字符串转换为数组
    const productIdArray = productIds.split(',');
    const countArray = counts.split(',');

    // 发送请求获取商品详情
    $.ajax({
        url: '/product/list',
        type: 'GET',
        data: {
            productIds: productIds
        },
        success: function(response) {
            if (response.code === 0 && response.data) {
                renderOrderItems(response.data, productIdArray, countArray);
            } else {
                layer.msg('获取商品信息失败');
            }
        },
        error: function() {
            layer.msg('网络错误，请稍后重试');
        }
    });
}

// 渲染订单商品列表
function renderOrderItems(products, productIdArray, countArray) {
    let tbody = $('tbody');
    tbody.empty();

    let totalAmount = 0;

    // 遍历商品数据，生成表格行
    products.forEach((product, index) => {
        // 查找当前商品ID在数组中的位置
        const productIndex = productIdArray.indexOf(product.productid.toString());

        if (productIndex !== -1) {
            // 获取对应的数量
            const quantity = parseInt(countArray[productIndex]);
            const itemTotal = product.price * quantity;
            totalAmount += itemTotal;

            // 添加商品行
            tbody.append(`
                    <tr class="cart_item">
                        <td class="cart-product-name">${product.name}<strong class="product-quantity"> × ${quantity}</strong></td>
                        <td class="cart-product-total text-center"><span class="amount">¥${itemTotal.toFixed(2)}</span></td>
                    </tr>
                `);
        }
    });

    // 更新小计和总计
    $('.cart-subtotal .amount').text(`¥${totalAmount.toFixed(2)}`);
    $('.order-total .amount').text(`¥${totalAmount.toFixed(2)}`);
}


        //结算
        $("#jiesuanBtn").click(function(){
            // 获取URL参数中的订单ID和商品ID
            const urlParams = new URLSearchParams(window.location.search);
            const orderId = urlParams.get('orderid');
            const productIds = urlParams.get('productids');

            if (!orderId) {
                layer.msg('订单信息不完整，请返回购物车重新结算');
                return;
            }

            // 查找默认地址或选中的地址
            const selectedAddressId = $('input[name="selected-address"]:checked').val();

            if (!selectedAddressId) {
                layer.msg('请选择一个收货地址');
                return;
            }
            // 首先查找默认地址
            // $('.address-item').each(function() {
            //     const isDefault = $(this).find('.default-checkbox').prop('checked');
            //     if (isDefault) {
            //         const addressId = $(this).data('id');
            //         selectedAddress = {
            //             addressId: addressId
            //         };
            //         return false; // 跳出循环
            //     }
            // });

            // 如果没有找到默认地址，提示用户选择地址
            // if (!selectedAddress) {
            //     layer.msg('请选择或添加一个默认收货地址');
            //     return;
            // }

            // 获取选中地址的详细信息
            $.ajax({
                url: `/useraddress/getuseraddressbyid?id=${selectedAddressId}`,
                type: 'GET',
                success: function(response) {
                    if (response.code == 0 && response.data) {
                        const address = response.data;

                        // 将地址信息保存到orderaddress表
                        $.ajax({
                            url: '/orderaddress/add',
                            type: 'POST',
                            data: {
                                orderid: orderId,
                                nickname: address.name,
                                province: address.province,
                                city: address.city,
                                state: address.state,
                                address: address.address,
                                phone: address.phone
                            },
                            success: function(res) {
                                if (res.code === 0 || res.code === 200) {
                                    // 更新订单状态为1（待发货）
                                    $.ajax({
                                        url: '/order/edit',
                                        type: 'POST',
                                        data: {
                                            orderid: orderId,
                                            status: 0
                                        },
                                        success: function(updateRes) {
                                            if (updateRes.code === 0) {
                                                // 订单状态更新成功后，删除购物车中已选择的商品
                                                if (productIds) {
                                                    const productIdArray = productIds.split(',');

                                                    // 创建一个Promise数组来处理所有删除请求
                                                    const deletePromises = productIdArray.map(productId => {
                                                        return new Promise((resolve, reject) => {
                                                            $.ajax({
                                                                url: '/cart/delete',
                                                                type: 'POST',
                                                                data: {
                                                                    productid: productId
                                                                },
                                                                success: function(deleteRes) {
                                                                    resolve(deleteRes);
                                                                },
                                                                error: function(xhr, status, error) {
                                                                    console.error(`删除购物车商品失败 (ID: ${productId}):`, error);
                                                                    resolve(null); // 即使失败也继续处理
                                                                }
                                                            });
                                                        });
                                                    });

                                                    // 等待所有删除操作完成
                                                    Promise.all(deletePromises)
                                                        .then(() => {
                                                            layer.msg('订单提交成功！购物车已更新', {icon: 1});
                                                            // 跳转到订单成功页面或其他页面
                                                            location.href="shopping/payment?orderid="+orderId;
                                                            /*setTimeout(function() {
                                                                location.href = "/shopping/index";
                                                            }, 1500);*/
                                                        })
                                                        .catch(error => {
                                                            console.error('删除购物车商品时出错:', error);
                                                            layer.msg('订单提交成功！但购物车更新失败', {icon: 1});
                                                            setTimeout(function() {
                                                                location.href = "/shopping/index";
                                                            }, 1500);
                                                        });
                                                } else {
                                                    layer.msg('订单提交成功！', {icon: 1});
                                                    setTimeout(function() {
                                                        location.href = "/shopping/index";
                                                    }, 1500);
                                                }
                                            } else {
                                                layer.msg('订单状态更新失败：' + (updateRes.msg || '未知错误'), {icon: 2});
                                            }
                                        },
                                        error: function(xhr, status, error) {
                                            console.error('更新订单状态失败:', error);
                                            layer.msg('更新订单状态失败，请稍后重试', {icon: 2});
                                        }
                                    });
                                } else {
                                    layer.msg('订单地址保存失败：' + (res.msg || '未知错误'), {icon: 2});
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('保存订单地址失败:', error);
                                layer.msg('保存订单地址失败，请稍后重试', {icon: 2});
                            }
                        });
                    } else {
                        layer.msg('获取地址信息失败', {icon: 2});
                    }
                },
                error: function(xhr, status, error) {
                    console.error('获取地址信息失败:', error);
                    layer.msg('获取地址信息失败，请稍后重试', {icon: 2});
                }
            });
        });


    </script>

</body>

</html>